<!-- 维修评价详情弹窗 -->
<template>

  <a-tabs v-model:activeKey="activeKey" centered>
    <a-tab-pane key="1" tab="通知详情">
      <a-form
        ref="form3"
        class="ele-form-detail"
        :model="noticeModalApp.notice"
        :label-col="{md: {span: 2}, sm: {span: 4}, xs: {span: 6}}"
        :wrapper-col="{md: {span: 22}, sm: {span: 20}, xs: {span: 18}}">
        <a-descriptions :title="noticeModalApp.title" bordered>
          <a-descriptions-item label="通知标题">
            {{ noticeModalApp.notice.title }}
          </a-descriptions-item>
          <a-descriptions-item label="通知类型">
            {{ noticeModalApp.notice.noticeType }}
          </a-descriptions-item>
          <a-descriptions-item label="是否发布">
            {{ noticeModalApp.notice.pulish }}
          </a-descriptions-item>
          <a-descriptions-item label="状态">
            {{ noticeModalApp.notice.status }}
          </a-descriptions-item>
          <a-descriptions-item label="备注">
            {{ noticeModalApp.notice.remark }}
          </a-descriptions-item>
          <a-descriptions-item label="创建时间">
            {{ noticeModalApp.notice.createDatetime }}
          </a-descriptions-item>
        </a-descriptions>
        <div class="notice">
          <div v-html="noticeModalApp.notice.content">
          </div>
        </div>
      </a-form>
    </a-tab-pane>
    <a-tab-pane key="2" tab="已读用户" force-render>
      <div>
        <vxe-table
          border
          show-header-overflow
          show-overflow
          :row-config="{isHover: true}"
          :data="data.readUsers">
          <vxe-column type="seq" title="序号" width="60"></vxe-column>
          <vxe-column field="nickname" title="昵称"></vxe-column>
          <vxe-column field="phone" title="电话"></vxe-column>
        </vxe-table>
      </div>
    </a-tab-pane>
    <a-tab-pane key="3" tab="未读用户">
      <div>
        <vxe-table
          border
          show-header-overflow
          show-overflow
          :row-config="{isHover: true}"
          :data="data.notReadUsers">
          <vxe-column type="seq" title="序号" width="60"></vxe-column>
          <vxe-column field="nickname" title="昵称"></vxe-column>
          <vxe-column field="phone" title="电话"></vxe-column>
        </vxe-table>
      </div>

    </a-tab-pane>
  </a-tabs>

</template>

<script>
import {defineComponent, reactive, onMounted, inject,ref} from "vue";
import {useRoute} from "vue-router"
import {NoticeService} from "@/views/repair/repairManagement/notice/noticeService";

export default defineComponent({
  setup() {
    const route = useRoute();
    let routeId = route.params.id;
    let noticeListApp = inject('noticeListApp', reactive({}));
    const noticeModalApp = reactive({id: null, notice: {}, display: false});
    let data=reactive({
      notReadUsers:[],
      readUsers:[]
    })

    onMounted(() => {
      noticeModalApp.notice = {};
      if (routeId) {
        noticeModalApp.id = routeId;
      } else if (noticeListApp.viewModalShowing) {
        noticeModalApp.id = noticeListApp.currentId;
        noticeModalApp.display = true;
      }
      if (noticeModalApp.id) {
        getInfo(noticeModalApp.id);
        findReadNoticeUser();
        findNotReadNoticeUser();

      }
    })

    const getInfo = (id) => {
      NoticeService.findNotice(id).then((res) => {
        noticeModalApp.notice = res.data;
        noticeModalApp.title = "查看 " + noticeModalApp.notice.name;
      })
    }
    const findReadNoticeUser= () =>{
      NoticeService.findReadNoticeUser(noticeModalApp.id).then((res)=>{
        console.log("read",res)
       data.readUsers=res.data.readNoticeUserList;
        console.log(data)
      })
    }

    const findNotReadNoticeUser=()=>{
      console.log("findNot")
      NoticeService.findNotReadNoticeUser(noticeModalApp.id).then((res)=>{
        console.log("notRead",res)
        data.notReadUsers=res.data.notReadNoticeUserList;
      })
    }

    const activeKey=ref('1');
    return {
      noticeModalApp,
      routeId,
      getInfo,
      activeKey,
      findReadNoticeUser,
      findNotReadNoticeUser,
      data
    }
  }
})
</script>

<style scoped>
.notice{
  width: 90%;
  margin: 30px auto auto;
  border: #c6c6c6 solid 1px;
  border-radius: 20px;
  padding: 20px;
}
</style>

